<template>
  <a-layout class="layout-demo">
    <a-layout-sider hide-trigger collapsible :collapsed="collapsed">
      <div class="logo">
        <span v-show="!collapsed">教培系统</span>
      </div>
      <a-menu
              :defaultOpenKeys="['1']"
              :defaultSelectedKeys="['0_3']"
              :style="{ width: '100%' }"
              @menuItemClick="onClickMenuItem">
        <a-sub-menu key="1">
          <template #title>
            <span>
              <IconCalendar />业务中心
            </span>
          </template>
          <a-menu-item key="1_1">​学院档案</a-menu-item>
          <a-menu-item key="1_2">​跟进记录</a-menu-item>
          <a-menu-item key="1_3">​试听记录</a-menu-item>
          <a-menu-item key="1_4">​营销活动</a-menu-item>
          <a-menu-item key="1_5">​预警提醒</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="2">
          <template #title>
            <span>
              <IconCalendar />​教务中心
            </span>
          </template>
          <a-menu-item key="2_1">​学院管理</a-menu-item>
          <a-menu-item key="2_2">​班级管理</a-menu-item>
          <a-menu-item key="2_3">​课程管理</a-menu-item>
          <a-menu-item key="2_4">​物品/费用</a-menu-item>
          <a-menu-item key="2_5">​在线商城</a-menu-item>
          <a-menu-item key="2_6">​老师管理</a-menu-item>
          <a-menu-item key="2_7">​上课记录</a-menu-item>
          <a-menu-item key="2_8">​学员考勤</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="3">
          <template #title>
            <span>
              <IconCalendar />​家校互动
            </span>
          </template>
          <a-menu-item key="3_1">​课后点评</a-menu-item>
          <a-menu-item key="3_2">​课后作业</a-menu-item>
          <a-menu-item key="3_3">​成长档案</a-menu-item>
          <a-menu-item key="3_4">​电子相册</a-menu-item>
          <a-menu-item key="3_5">​成绩单</a-menu-item>
          <a-menu-item key="3_6">​通知管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="4">
          <template #title>
            <span>
              <IconCalendar />​营销中心
            </span>
          </template>
          <a-menu-item key="4_1">​优惠券</a-menu-item>
          <a-menu-item key="4_2">​礼品中心</a-menu-item>
          <a-menu-item key="4_3">​小禾招生</a-menu-item>
          <a-menu-item key="4_4">​微官网</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="5">
          <template #title>
            <span>
              <IconCalendar />​财务中心
            </span>
          </template>
          <a-menu-item key="5_1">​订单管理</a-menu-item>
          <a-menu-item key="5_2">​充值管理</a-menu-item>
          <a-menu-item key="5_3">​收支明细</a-menu-item>
          <a-menu-item key="5_4">​课消记录</a-menu-item>
          <a-menu-item key="5_5">​工资结算</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="6">
          <template #title>
            <span>
              <IconCalendar />​数据中心
            </span>
          </template>
          <a-menu-item key="6_1">​经营汇总</a-menu-item>
          <a-menu-item key="6_2">​招生数据</a-menu-item>
          <a-menu-item key="6_3">​销售数据</a-menu-item>
          <a-menu-item key="6_4">​教务数据</a-menu-item>
          <a-menu-item key="6_5">​财务数据</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="7">
          <template #title>
            <span>
              <IconCalendar />​机构设置
            </span>
          </template>
          <a-menu-item key="7_1">​系统设置</a-menu-item>
          <a-menu-item key="7_2">​机构展示</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="8">
          <template #title>
            <span>
              <IconCalendar />​增值服务
            </span>
          </template>
          <a-menu-item key="8_1">​微信助手</a-menu-item>
          <a-menu-item key="8_2">​聚合支付</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="padding-left: 20px">
        <a-button shape="round" @click="onCollapse">
          <IconCaretRight v-if="collapsed" />
          <IconCaretLeft v-else />
        </a-button>
      </a-layout-header>
      <a-layout style="padding: 0 24px">
        <a-breadcrumb :style="{ margin: '16px 0' }">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script setup>
import { ref } from 'vue';
import { IconCaretRight, IconCaretLeft, IconCalendar } from '@arco-design/web-vue/es/icon';

const collapsed = ref(false);
const onCollapse = () => {
  collapsed.value = !collapsed.value;
};
</script>
<style scoped>
.layout-demo {
  height: 100vh;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-sizing: border-box;
}

.layout-demo .logo span {
  display: block;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}

.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}

.layout-demo :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}

.layout-demo :deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}
</style>
